<template id="app-5">
  <div id="app-5">
    <div id="parent-slot-example">
      <p class="header-title" :style="{ fontSize: 18 + 'px', fontWeight: 'bold' }">
        App05:Component Slot
      </p>
      <h1>I'm the parent</h1>
      <my-slot-component>
        <template #slot-01>
          <p>This is some original content</p>
        </template>
        <p>This is one first original content</p>
        <p>This is some more original content</p>
        <!-- 解构函数{}用法，将userInfo重命名为person -->
        <template #user-info="{userInfo:person}">
          {{ person.firstName }}
        </template>
      </my-slot-component>
    </div>
  </div>
</template>

<script>
import mySlotComponent from '@/components/slot/App0501';
export default {
  name: 'app05',
  data() {
    return {};
  },
  components: {
    mySlotComponent,
  },
};
</script>
